<template>

  <div class="itemMusicList">
    <div class="itemListTop1">
      <div class="a01">
        <img src="../../image/bofang.png" alt="" class="tubiao3">
        <span>播放全部<span>(共{{ itemList.length }}首)</span></span>
      </div>
     
        <span class="a1">歌曲名称</span>
      
        <span class="a2">作者</span>
     
      <div class="shoucang">
        <img src="../../image/jiahao.png" alt="" class="tubiao3">
        <span class="a3">收藏({{ subscribedCount }})</span>
      </div>
    </div>

    <table class="itemList">
      <!-- @click点击歌曲进行播放传参,,接下来传进去数组更改播放列表                            i是歌曲对应的下标                          把下标传给playlist-->
      <th style="display: flex; justify-content: space-between;" class="item" v-for="(item, i) in itemList" :key="i"
        @click="playMusic(i)">
      <td class="leftSpan">{{ i + 1 }}</td>
      <td class="leftname">{{ item.name }}</td>
      <td class="leftsingers">
        <span v-for="(item1, index) in item.ar" :key="index"> {{ item1.name }}</span>
      </td>
      <td style="display: flex; flex-direction: column;">
      </td>
      </th>
    </table>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  setup(props) {
    console.log(props);
  },
  props: ["itemList", "subscribedCount"],



  //底部导航栏渲染的更新数据
  methods: {
    //接受i
    playMusic: function (i) {
      this.updatePlayList(this.itemList);
      //传i
      this.updatePlayListIndex(i);
    },
    ...mapMutations(["updatePlayList", "updatePlayListIndex"]),

  },
  
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.itemMusicList {
  background-color: rgba(255, 244, 244, 0.2);
  padding: 0;
  margin-top: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.itemListTop1 {
  margin-top: 10px;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
}
.a01{
  justify-content: space-between;
  display: flex;
margin-top: 20px;
}
.shoucang{
display: flex;
justify-content: space-between;
margin-top: 20px;
color: rgb(219, 82, 82);
}







.listLeft {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  font-size: 30px;
}

.listRight {
  width: 20%;
  display: flex;

  color: rgb(180, 19, 19);
  margin-left: 290px;
}

.itemMusicList span {
  font-weight: 100;
}

.itemListTop span span {
  font-size: 15px;
  color: rgb(183, 8, 8);
}

.itemList {
  display: flex;
  flex-direction: column;
}

.itemList .item {
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itemLeft {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* .leftdingers{
  color: aqua;
} */

.leftSpan {
  display: inline-block;
  width: 30px;
  text-align: center;
}

/* div{
    margin-left: 0.3rem;
} */
.itemLeft p {
  height: 60px;
  width: 227px;
  height: 1px;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  font-weight: 700;
}

.leftSpan span {
  font-weight: 400;
  font-size: 12px;
  color: rgb(228, 90, 90);
}

.itemRight {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.itemRight svg {
  fill: #fff;
}

.liebiao {
  position: absolute;
  right: 0;
}

.leftSpan {
  width: 10%;
  color: #fff;
}

.leftname {
  width: 20%;
}

.leftsingers {
  width: 20%;
}

th {
  border: 1px solid rgb(177, 163, 163);
}

.tubiao3 {
  width: 40px;
  height: 40px;
}
.itemListTop1 span{
  padding-top: 0px;
  font-size: 30px;
  font-weight: 400;
}
.a1{
  margin-top: 1.7%;
  margin-right: 170px;
}
.a2{
  margin-top: 1.7%;
  margin-right: -60px;
}

</style>